<template>
  <div>

    <div class="body">
      <div class="left">
        <div class="list">
          <div v-show="item.show" @click="choose(item)" v-for="item in leftList" class="item" :class="{ 'on': item.selected }">{{ item.label }}</div>
        </div>
      </div>
      <div class="right">
        <component :is="selectedItem.component"></component>
      </div>
    </div>
  </div>
</template>

<script setup>

import BaseInfo from './BaseInfo.vue'
import AssetList from "./AssetList.vue";
import ConsumeList from "./ConsumeList.vue";


const props = defineProps({
  todoData: {
    type: Object
  }
})

const detailInfo = inject('detailInfo')


const emit = defineEmits(['sub']);

const leftList = reactive([{
  selected: true,
  label: '基本资料',
  component: BaseInfo,
  show: true
}, {
  selected: false,
  label: '资产列表',
  component: AssetList,
  show: true
}, {
  selected: false,
  label: '耗材列表',
  component: ConsumeList,
  show: false
}])

watch(detailInfo, function(newValue, oldValue) {
  if (newValue.number.indexOf('ZC')===0) {
    leftList[1].show = true;
    leftList[2].show = false;
  } else {
    leftList[1].show = false;
    leftList[2].show = true;
  }
})

function reset() {

  leftList[0].selected = true;
  leftList[1].selected = false;
  leftList[2].selected = false;

  leftList[1].show = true;
  leftList[2].show = false;
}

function choose(item) {

  leftList.forEach(item=> {
    item.selected = false;
  });
  item.selected = true;

}

const selectedItem = computed(function() {
  return leftList.find(item=> item.selected);
});

defineExpose({
  reset
})

</script>

<style scoped lang="scss">
  .body {
    height: 400px;
    display: flex;
    .left {
      width: 110px;
      height: 100%;
      background-color: #f2f4f7;
      flex-shrink: 0;
      .list {
        padding-top: 24px;
        .item {
          height: 44px;
          line-height: 44px;
          font-size: 14px;
          color: #0b1019;
          padding-left: 24px;
          cursor: pointer;
          &.on {
            color: #005bf5;
            background-color: #fff;
          }
        }

      }
    }
    .right {
      width: calc(100% - 110px);
      height: 100%;
      padding: 24px 24px 20px;
      box-sizing: border-box;
      overflow-y: auto;
    }
  }

</style>

